<template>
    <div class="divBox">
        <el-card class="box-card">
            <!-- <div slot="header" class="clearfix">
                <el-form size="small" label-width="100px" inline>
                    <el-form-item label="时间查询：">
                        <el-date-picker
                            v-model="userFrom.time"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div> -->
            <el-tabs v-model="showType">
                <el-tab-pane label="AI统计" name="count" />
                <!-- <el-tab-pane label="AI分析" name="analysis" /> -->
                <el-tab-pane label="业绩统计" name="achievement" />
            </el-tabs>
            <div v-show="showType=='count'">
                <el-row :gutter="10" align="middle" class="ivu-mt">
                    <el-col v-for="(item, index) in countTypeList" :key="index" :xl="6" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir" :class="{'one':index%5==0,'two':index%5==1,'three':index%5==2,'four':index%5==3,'five':index%5==4}">
                                <div class="card_box_cir1" :class="{'one1':index%5==0,'two1':index%5==1,'three1':index%5==2,'four1':index%5==3,'five1':index%5==4}">
                                    <i :class="item.icon" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="item.sum || 0" />
                                <span class="sp2" v-text="item.title" />
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-table :data="countData.userList" style="width: 100%;" size="small" id="educe-table">
                    <el-table-column prop="uid" label="ID" min-width="40" />
                    <el-table-column label="员工头像" min-width="50">
                        <template slot-scope="scope">
                            <div class="demo-image__preview">
                            <el-image
                                style="width: 36px; height: 36px"
                                :src="scope.row.avatar ? scope.row.avatar : moren"
                                :preview-src-list="[scope.row.avatar || moren]"
                            />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickname" label="员工昵称" min-width="40" />
                    <el-table-column prop="user_count" label="访问人数" min-width="40" />
                    <el-table-column prop="new_user" label="新用户" min-width="40" />
                    <el-table-column prop="view_count" label="访问次数" min-width="40" />
                    <el-table-column prop="card_0" label="名片" min-width="40" />
                    <el-table-column prop="card_1" label="产品" min-width="40" />
                    <el-table-column prop="card_2" label="官网" min-width="40" />
                    <el-table-column prop="card_3" label="添加" min-width="40" />
                    <el-table-column prop="card_4" label="转发" min-width="40" />
                </el-table>
                <!-- 分页器 -->
                <!-- <div class="block">
                    <el-pagination
                    :page-sizes="[20, 40, 60, 80]"
                    :page-size="userFrom.limit"
                    :current-page="userFrom.page"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total"
                    @size-change="handleSizeChange"
                    @current-change="pageChange"
                    />
                </div> -->
            </div>
            <!-- <div v-show="showType=='analysis'">
                <el-row :gutter="10" align="middle" class="ivu-mt">
                    <el-col v-for="(item, index) in analysisTypeList" :key="index" :xl="6" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir" :class="{'one':index%5==0,'two':index%5==1,'three':index%5==2,'four':index%5==3,'five':index%5==4}">
                                <div class="card_box_cir1" :class="{'one1':index%5==0,'two1':index%5==1,'three1':index%5==2,'four1':index%5==3,'five1':index%5==4}">
                                    <i :class="item.icon" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="item.sum || 0" />
                                <span class="sp2" v-text="item.title" />
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-table :data="tableData.data" style="width: 100%;" size="small" id="educe-table">
                    <el-table-column prop="uid" label="ID" min-width="40" />
                    <el-table-column label="员工头像" min-width="50">
                        <template slot-scope="scope">
                            <div class="demo-image__preview">
                            <el-image
                                style="width: 36px; height: 36px"
                                :src="scope.row.avatar ? scope.row.avatar : moren"
                                :preview-src-list="[scope.row.avatar || moren]"
                            />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="uid" label="员工昵称" min-width="40" />
                    <el-table-column prop="uid" label="分享次数" min-width="40" />
                    <el-table-column prop="uid" label="分享人数" min-width="40" />
                    <el-table-column prop="uid" label="分享新增" min-width="40" />
                    <el-table-column prop="uid" label="名片" min-width="40" />
                    <el-table-column prop="uid" label="产品" min-width="40" />
                    <el-table-column prop="uid" label="官网" min-width="40" />
                    <el-table-column prop="uid" label="添加" min-width="40" />
                    <el-table-column prop="uid" label="转发" min-width="40" />
                </el-table>
            </div> -->
            <div v-show="showType=='achievement'">
                <el-row :gutter="10" align="middle" class="ivu-mt">
                    <el-col v-for="(item, index) in achievementTypeList" :key="index" :xl="6" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir" :class="{'one':index%5==0,'two':index%5==1,'three':index%5==2,'four':index%5==3,'five':index%5==4}">
                                <div class="card_box_cir1" :class="{'one1':index%5==0,'two1':index%5==1,'three1':index%5==2,'four1':index%5==3,'five1':index%5==4}">
                                    <i :class="item.icon" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="Number(item.sum || 0).toFixed(2)" v-if="index==2"/>
                                <span class="sp1" v-text="item.sum || 0" v-else></span>
                                <span class="sp2" v-text="item.title" />
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-table :data="achievementData.userList" style="width: 100%;" size="small" id="educe-table">
                    <el-table-column prop="uid" label="ID" min-width="40" />
                    <el-table-column label="员工头像" min-width="50">
                        <template slot-scope="scope">
                            <div class="demo-image__preview">
                            <el-image
                                style="width: 36px; height: 36px"
                                :src="scope.row.avatar ? scope.row.avatar : moren"
                                :preview-src-list="[scope.row.avatar || moren]"
                            />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickname" label="员工昵称" min-width="40" />
                    <el-table-column prop="product" label="访问商城次数" min-width="40" />
                    <el-table-column prop="pay_count" label="成交笔数" min-width="40" />
                    <el-table-column prop="pay_money" label="客单价" min-width="40" />
                    <el-table-column prop="view" label="浏览" min-width="40" />
                    <el-table-column prop="order" label="下单" min-width="40" />
                    <el-table-column prop="pay" label="付款" min-width="40" />
                    <el-table-column prop="uid" label="下单转化率" min-width="40">
                        <template  slot-scope="scope">  
                            <span>{{ scope.row.order ? Number((scope.row.order/scope.row.view)*100).toFixed(2) : 0 }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="uid" label="付款转化率" min-width="40">
                        <template  slot-scope="scope">  
                            <span>{{ scope.row.pay ?  Number((scope.row.pay/scope.row.order)*100).toFixed(2) : 0 }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="uid" label="成交转化率" min-width="40">
                        <template  slot-scope="scope">  
                            <span>{{ scope.row.pay ?  Number((scope.row.pay/scope.row.view)*100).toFixed(2) : 0 }}%</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>
<script>
    import { getCRMCount,getCRMAchievement } from "@/api/buss"
    export default {
        data(){
            return {
                // 展示类型
                showType:"count",
                // AI统计总数据
                countTypeList:[{
                    title:"总访问人数",
                    sum:0,
                    icon:'el-icon-user-solid'
                },{
                    title:"总新用户",
                    sum:0,
                    icon:'el-icon-user'
                },{
                    title:"总访问次数",
                    sum:0,
                    icon:'el-icon-pie-chart'
                }],
                // AI分析总数据
                // analysisTypeList:[{
                //     title:"总分享人数",
                //     sum:100,
                //     icon:'el-icon-user-solid'
                // },{
                //     title:"总分享新增",
                //     sum:100,
                //     icon:'el-icon-user'
                // },{
                //     title:"总分享次数",
                //     sum:100,
                //     icon:'el-icon-share'
                // }],
                // 业绩总数据
                achievementTypeList:[{
                    title:"总访问商城次数",
                    sum:0,
                    icon:'el-icon-shopping-bag-1'
                },{
                    title:"总成交笔数",
                    sum:0,
                    icon:'el-icon-s-order'
                },{
                    title:"客单价",
                    sum:0,
                    icon:'el-icon-coin'
                }],
                // 搜索
                userFrom:{
                    time:"",
                    limit:10,
                    page:1,
                },
                pickerOptions: {
                    shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit("pick", [start, end]);
                        }
                    }
                    ]
                },
                // 统计数据
                countData:{},
                // 业绩数据
                achievementData:{}
            }
        },
        mounted(){
            this.getCRMCount()
        },
        watch:{
            showType:function(){
                if(this.showType == 'count'){
                    this.getCRMCount()
                }else{
                    this.getCRMAchievement()
                }
            }
        },
        methods:{
            // 获取AI统计数据
            getCRMCount(){
                getCRMCount(this.userFrom).then(res=>{
                    this.countData = res.data
                    this.countTypeList[0].sum = res.data.count.user
                    this.countTypeList[1].sum = res.data.count.new_user
                    this.countTypeList[2].sum = res.data.count.view
                })
            },
            getCRMAchievement(){
                getCRMAchievement().then(res=>{
                    this.achievementData = res.data
                    this.achievementTypeList[0].sum = res.data.view.product
                    this.achievementTypeList[1].sum = res.data.view.pay_count
                    this.achievementTypeList[2].sum = res.data.view.pay_money
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .one {
    background: #e4ecff;
    }
    .two {
    background: #fff3e0;
    }
    .three {
    background: #eaf9e1;
    }
    .four {
    background: #ffeaf4;
    }
    .five {
    background: #f1e4ff;
    }
    .one1 {
    background: #4d7cfe;
    }
    .two1 {
    background: #ffab2b;
    }
    .three1 {
    background: #6dd230;
    }
    .four1 {
    background: #ff85c0;
    }
    .five1 {
    background: #b37feb;
    }
    .card_box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        /*justify-content: center*/
        padding: 25px;
        box-sizing: border-box;
        border-radius: 4px;
        background: #f5f7f9;
        .card_box_cir {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            .card_box_cir1 {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            }
        }
        .card_box_txt {
            .sp1 {
            display: block;
            color: #252631;
            font-size: 24px;
            line-height: 37px;
            }
            .sp2 {
            display: block;
            color: #98a9bc;
            font-size: 12px;
            }
        }
    }
</style>